<template>
        <div>
                <div className="space-12"></div>
                <div className="row">
                        <div className="col-xs-12">
                                <div className="text-center">
          <span className="btn btn-app btn-sm btn-light no-hover">
              <span className="line-height-1 bigger-170 blue"> 518 </span>
              <br>
              <span className="line-height-1 smaller-90"> 课程 </span>
          </span>
                                        <span className="btn btn-app btn-sm btn-yellow no-hover">
              <span className="line-height-1 bigger-170"> 6,321 </span>

              <br>
              <span className="line-height-1 smaller-90"> 大章 </span>
          </span>

                                        <span className="btn btn-app btn-sm btn-pink no-hover">
              <span className="line-height-1 bigger-170"> 4,182 </span>

              <br>
              <span className="line-height-1 smaller-90"> 小节 </span>
          </span>

                                        <span className="btn btn-app btn-sm btn-success no-hover">
              <span className="line-height-1 bigger-170"> 5.23 </span>

              <br>
              <span className="line-height-1 smaller-90"> 会员(万) </span>
          </span>

                                        <span className="btn btn-app btn-sm btn-primary no-hover">
              <span className="line-height-1 bigger-170"> 12.76 </span>

              <br>
              <span className="line-height-1 smaller-90"> 报名(万) </span>
          </span>

                                        <span className="btn btn-app btn-sm btn-grey no-hover">
              <span className="line-height-1 bigger-170"> 32.96 </span>

              <br>
              <span className="line-height-1 smaller-90"> 评论(万) </span>
          </span>

                                </div>

                                <div className="space-12"></div>

                                <div className="hr hr2 hr-double"></div>

                                <div className="space-12"></div>

                        </div>

                        <div className="col-sm-12 infobox-container">
                                <div className="infobox infobox-green">
                                        <div className="infobox-icon">
                                                <i className="ace-icon fa fa-comments"></i>
                                        </div>

                                        <div className="infobox-data">
                                                <span className="infobox-data-number">332</span>
                                                <div className="infobox-content">新增评论</div>
                                        </div>

                                        <div className="stat stat-success">8%</div>
                                </div>

                                <div className="infobox infobox-blue">
                                        <div className="infobox-icon">
                                                <i className="ace-icon fa fa-twitter"></i>
                                        </div>

                                        <div className="infobox-data">
                                                <span className="infobox-data-number">58</span>
                                                <div className="infobox-content">新增注册会员</div>
                                        </div>

                                        <div className="badge badge-success">
                                                +10%
                                                <i className="ace-icon fa fa-arrow-up"></i>
                                        </div>
                                </div>

                                <div className="infobox infobox-pink">
                                        <div className="infobox-icon">
                                                <i className="ace-icon fa fa-shopping-cart"></i>
                                        </div>

                                        <div className="infobox-data">
                                                <span className="infobox-data-number">108</span>
                                                <div className="infobox-content">课程报名</div>
                                        </div>
                                        <div className="stat stat-important">4%</div>
                                </div>

                                <div className="space-12"></div>

                                <div className="hr hr2 hr-double"></div>

                                <div className="space-12"></div>

                        </div>

                        <div className="col-sm-12">
                                <div className="widget-box transparent">
                                        <div className="widget-header widget-header-flat">
                                                <h4 className="widget-title lighter">
                                                        <i className="ace-icon fa fa-signal"></i>
                                                        销售量
                                                </h4>

                                        </div>

                                        <div className="widget-body">
                                                <div className="widget-main padding-4">
                                                        <div id="sales-charts"></div>
                                                </div><!-- /.widget-main -->
                                        </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->

                                <div className="space-12"></div>

                                <div className="hr hr2 hr-double"></div>

                                <div className="space-12"></div>
                        </div><!-- /.col -->

                        <div className="col-sm-6">
                                <div className="widget-box transparent">
                                        <div className="widget-header widget-header-flat">
                                                <h4 className="widget-title lighter">
                                                        <i className="ace-icon fa fa-star orange"></i>
                                                        课程销售排名
                                                </h4>

                                        </div>

                                        <div className="widget-body">
                                                <div className="widget-main no-padding">
                                                        <table className="table table-bordered table-striped">
                                                                <thead className="thin-border-bottom">
                                                                <tr>
                                                                        <th>
                                                                                <i className="ace-icon fa fa-caret-right blue"></i>课程名称
                                                                        </th>

                                                                        <th>
                                                                                <i className="ace-icon fa fa-caret-right blue"></i>价格
                                                                        </th>

                                                                        <th>
                                                                                <i className="ace-icon fa fa-caret-right blue"></i>购买数
                                                                        </th>
                                                                </tr>
                                                                </thead>

                                                                <tbody>
                                                                <tr>
                                                                        <td>开发工具IDEA从入门到爱不释手</td>

                                                                        <td>
                                                                                <b className="green">￥299.00</b>
                                                                        </td>

                                                                        <td>
                                                                                <span className="label label-warning arrowed arrowed-right">5,132</span>
                                                                        </td>
                                                                </tr>

                                                                <tr>
                                                                        <td>开发工具IDEA从入门到爱不释手</td>

                                                                        <td>
                                                                                <b className="red">￥388.00</b>
                                                                        </td>

                                                                        <td>
                                                                                <span className="label label-warning arrowed arrowed-right">3,132</span>
                                                                        </td>
                                                                </tr>

                                                                <tr>
                                                                        <td>开发工具IDEA从入门到爱不释手</td>

                                                                        <td>
                                                                                <b className="green">￥199.00</b>
                                                                        </td>

                                                                        <td>
                                                                                <span className="label label-warning arrowed arrowed-right">2,132</span>
                                                                        </td>
                                                                </tr>

                                                                <tr>
                                                                        <td>开发工具IDEA从入门到爱不释手</td>

                                                                        <td>
                                                                                <b className="green">￥299.00</b>
                                                                        </td>

                                                                        <td>
                                                                                <span className="label label-success arrowed arrowed-right">1,654</span>
                                                                        </td>
                                                                </tr>

                                                                <tr>
                                                                        <td>开发工具IDEA从入门到爱不释手</td>

                                                                        <td>
                                                                                <b className="green">￥199.00</b>
                                                                        </td>

                                                                        <td>
                                                                                <span className="label label-success arrowed arrowed-right">1,254</span>
                                                                        </td>
                                                                </tr>
                                                                </tbody>
                                                        </table>
                                                </div><!-- /.widget-main -->
                                        </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                        </div><!-- /.col -->
                        <div className="col-sm-6">
                                <div className="widget-box transparent">
                                        <div className="widget-header widget-header-flat">
                                                <h4 className="widget-title lighter">
                                                        <i className="ace-icon fa fa-star orange"></i>
                                                        分类销售排名
                                                </h4>

                                        </div>

                                        <div className="widget-body">
                                                <div className="widget-main">
                                                        <div id="piechart-placeholder"></div>

                                                </div><!-- /.widget-main -->
                                        </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                        </div><!-- /.col -->
                </div><!-- /.row -->
        </div>
</template>

<script>
        export default {
                name: "welcome",
                mounted: function () {
                        let _this = this;
                        // sidebar激活样式方法一
                        // this.$parent.activeSidebar("welcome-sidebar");
                        _this.drawSaleChart();
                        _this.drawPieChart();
                },
                methods: {
                        drawSaleChart() {
                                // 生成随机两组数据
                                let d1 = [];
                                for (let i = 0; i < 30; i += 1) {
                                        d1.push([i + 1, 2000 + Math.floor((Math.random() * 100) + 1)]);
                                }
                                let d2 = [];
                                for (let i = 0; i < 30; i += 1) {
                                        d2.push([i + 1, 1900 + Math.floor((Math.random() * 100) + 1)]);
                                }

                                let sales_charts = $('#sales-charts').css({'width': '100%', 'height': '220px'});
                                $.plot("#sales-charts", [
                                        {label: "最近30天", data: d1},
                                        {label: "上一周期", data: d2},
                                ], {
                                        hoverable: true,
                                        shadowSize: 0,
                                        series: {
                                                lines: {show: true},
                                                points: {show: true}
                                        },
                                        xaxis: {
                                                tickLength: 0
                                        },
                                        yaxis: {
                                                tickLength: 0
                                        },
                                        grid: {
                                                backgroundColor: {colors: ["#fff", "#fff"]},
                                                borderWidth: 1,
                                                borderColor: '#555'
                                        }
                                });
                        },

                        drawPieChart() {
                                let placeholder = $('#piechart-placeholder').css({'width': '90%', 'min-height': '180px'});
                                let data = [
                                        {label: "Java", data: 38.7, color: "#68BC31"},
                                        {label: "Python", data: 24.5, color: "#2091CF"},
                                        {label: "Android", data: 18.6, color: "#DA5430"},
                                        {label: "其它", data: 10, color: "#FEE074"},
                                ];
                                $.plot(placeholder, data, {
                                        series: {
                                                pie: {
                                                        show: true,
                                                        tilt: 0.8,
                                                        highlight: {
                                                                opacity: 0.25
                                                        },
                                                        stroke: {
                                                                color: '#fff',
                                                                width: 2
                                                        },
                                                        startAngle: 2
                                                }
                                        },
                                        legend: {
                                                show: true,
                                                position: "ne",
                                                labelBoxBorderColor: null,
                                                margin: [-30, 15]
                                        }
                                        ,
                                        grid: {
                                                hoverable: true,
                                                clickable: true
                                        }
                                })
                        },
                }
        }
</script>
